import React from "react";
import './App.css';
import MDEditor from '@uiw/react-md-editor';
import Add from './add';
import { Form, Input, Button, Switch, Tabs } from 'antd';

const { TabPane } = Tabs;

function callback(key) {
  console.log(key);
}

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const tailLayout = {
  wrapperCol: { offset: 4, span: 20 },
};

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "**Hello world!!!**", blogs: [], now: {} };
  }
  formRef = React.createRef()
  async getInfo() {
    let result = await global.$.get({
      url: 'admin/all'
    })
    if (result.code === 200) {
      this.setState({
        blogs: result.data
      })
    }
  }
  componentDidMount() {
    this.getInfo()
  }
  setValue = (value) => {
    this.setState({
      value: value
    });
  }
  setNow = (i) => {
    this.setState({
      now: this.state.blogs[i]
    })
    let now = this.state.blogs[i];
    this.formRef.current.setFieldsValue({
      title: now.title,
      is_enable: now.is_enable.data[0]
    })
    this.setValue(now.detail)
  }

  onFinish = (values) => {
    let data = {
      id: this.state.now.id,
      detail: this.state.value,
      ...values
    }
    global.$.post({
      url: 'admin/blog/update',
      data
    })
  };

  onFinishFailed(errorInfo) {
    console.log('Failed:', errorInfo);
  };

  render() {
    return (
      <div className="container">
        <Tabs defaultActiveKey="1" onChange={callback}>
          <TabPane tab="修改" key="1">
            <MDEditor
              height={400}
              value={this.state.value}
              onChange={this.setValue}
            />
            <div className="main">
              <div className="left">
                {
                  this.state.blogs.map((item, i) => {
                    return (<div className="item" onClick={() => { this.setNow(i) }} key={i.toString()}>{item.title}</div>)
                  })
                }
              </div>
              <div className="right">
                <Form
                  {...layout}
                  ref={this.formRef}
                  name="basic"
                  initialValues={{ remember: true }}
                  onFinish={this.onFinish}
                  onFinishFailed={this.onFinishFailed}
                >
                  <Form.Item
                    label="标题"
                    name="title"
                    initialValue={this.state.now.title}
                    rules={[{ required: true, message: '请输入标题' }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item name="is_enable" label="是否启用" valuePropName="checked">
                    <Switch />
                  </Form.Item>


                  <Form.Item {...tailLayout}>
                    <Button type="primary" htmlType="submit">
                      Submit
                </Button>
                  </Form.Item>
                </Form>
              </div>
            </div>
          </TabPane>
          <TabPane tab="添加" key="2">
            <Add />
         </TabPane>
        </Tabs>

      </div>
    );
  }
}
